[jQuery] 제이쿼리 선택자 escapeSelector() 알아보기

제이쿼리의 선택자 사용시 DOM 엘리먼트에 특수기호 #, ., : 등이 포함된 경우 선택하는 방법으로 escapeSelector()를 사용할 수 있습니다. 간단한 문법은 아래와 같습니다.

$.escapeSelector(selector)

만약 escapeSelector()를 사용하여 엘리먼트를 선택하는 경우 $를 함께 혼합하여 사용해야합니다. 방법은 아래의 예제를 봐주세요. 

# 제이쿼리 escapeSelector() 예제보기

아래와 같이 특수문자 해시기호(#)를 아이디 값으로 가지는 경우 어떻게 사용하는지 알아봅니다.

기존의 방식이라면 아래와 같이 선택자를 사용합니다.

하지만 다음과 같이 선택자는 동작하지 않고 에러가 발생합니다.
Uncaught Error: Syntax error, unrecognized expression

살펴보면 문법상의 오류가 나타납니다. 특수문자와 충돌이 나타남을 쉽게 알 수 있습니다. 이런 경우에 아래와 같이 escapeSelector()를 함께 사용할 수 있습니다.

이번에는 에러가 발생하지 않고 원하는 엘리먼트가 선택되었습니다.

! className에 특수문자가 포함된 경우

다음은 또 다른 예제로 클래스에 해당하는 #을 기호로 가지는 경우입니다.

이번에도 마찬가지로 일반적인 선택자 방식은 에러가 발생합니다.

동일하게 escapeSelector()를 함께 사용하면 가능합니다.


잘 동작합니다. 여기까지 escapeSelector()를 사용하여 특수문자를 가지는 엘리먼트를 제이쿼리에서 어떻게 선택하는지 알아보았습니다.